<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">  
    <ui:composition template="/panel.xhtml">
        <ui:define name="contenido">            
            <h:form id="frmPrincipal">
                <p:panel id="pnlBusqueda" header="BÚSQUEDA DE TUTORIALES" style="font-size: 10px">
                    <h:panelGrid id="pgFormFilter" columns="10" cellpadding="4">
                        <h:outputLabel value="ID" style="font-size: 10px"/>
                        <p:inputText value="#{monitorMBean.dtoFiltro.id}" size="10"/>

                        <h:outputLabel value="NOMBRE" style="font-size: 10px"/>
                        <p:inputText value="#{monitorMBean.dtoFiltro.nombre}" size="50"/>
                    </h:panelGrid>
                    <f:facet name="footer">
                        <p:commandButton value="BUSCAR" icon="ui-icon ui-icon-search"
                                         title="BUSCAR" actionListener="#{monitorMBean.buscar}" ajax="true"
                                         update=":frmPrincipal:pnlTabla"
                                         style="font-size: 10px"/>

                        <p:commandButton title="NUEVO" icon="ui-icon ui-icon-plus"
                                         value="NUEVO" action="#{monitorMBean.nuevo}"
                                         style="font-size: 10px"
                                         rendered="#{usuarioMBean.esAdmin}"/>
                    </f:facet>
                </p:panel>               

                <p:panel id="pnlTabla" header="RESULTADO DE LA BÚSQUEDA" style="font-size: 10px">
                    <h:panelGrid columns="1">
                        <p:dataTable id="tblPrincipal" value="#{monitorMBean.lista}" var="dto" rowKey="#{dto.id}"
                                     widgetVar="widTable" emptyMessage="NO HAY REGISTROS"
                                     paginator="true" paginatorPosition="top" rows="5">
                            <p:column>
                                <h:panelGrid columns="10" cellpadding="5">                                    
                                    <p:commandButton icon="ui-icon ui-icon-search" title="VER" 
                                                     action="#{monitorMBean.ver}" ajax="true">
                                        <f:setPropertyActionListener value="#{dto}" target="#{monitorMBean.dto}"/>
                                    </p:commandButton>
                                </h:panelGrid>
                            </p:column>
                            <p:column headerText="ID" style="font-size: 10px">
                                <h:outputText value="#{dto.id}" style="font-size: 10px"/>
                            </p:column>

                            <p:column headerText="NOMBRE" style="font-size: 10px">
                                <h:outputText value="#{dto.nombre}" style="font-size: 10px"/>
                            </p:column>

                            <p:column headerText="DESCRIPCIÓN" style="font-size: 10px">
                                <h:outputText value="#{dto.descripcion}" style="font-size: 10px"/>
                            </p:column>

                            <p:column headerText="FECHA CREACIÓN" style="font-size: 10px">
                                <h:outputText value="#{dto.fechaCreacion}" style="font-size: 10px"/>
                            </p:column>
                        </p:dataTable>
                    </h:panelGrid>
                </p:panel>
            </h:form>            
        </ui:define>
    </ui:composition>
</html>

